<?php
	session_start();
	
	$_SESSION['USER_ID'] = 31;
	$_SESSION['USER_NAME'] = "Thang";

?>

<!DOCTYPE html>
<html>
	<head>
		<title>Touch Me - <?php echo $_SESSION['USER_NAME']; ?></title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style-app.css">
		<link rel="stylesheet" type="text/css" href="css/act.css">
		<link rel="stylesheet" type="text/css" href="css/c-frame.css">
		<link rel="stylesheet" type="text/css" href="css/animate.css" media="all">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	</head>

	<body>

		<!-- Logo -->
		<img id="logo" src="images/logo.png" alt="Logo" title="Touch Me">
		<span class="yourself">
			<img class="yourPic" src="images/avatar.jpg" alt="Your Picture" title="Jacken" id="<?php echo $_SESSION['USER_ID'];?>"><br>
			<p class="name" id="userName">Jacken</p>
		</span>

		<div class="u-act">
			<button class="pred"></button>

			<button class="c-change"></button>

			<div class="u">
				<img src="images/avatar.jpg" alt="Your Picture" class="av"><br>
				<a href="#">Change Avatar</a>
			</div>
			<div class="act">
				<button class="btn-c-pass">Change pass</button>
				<button class="btn-s-out">Sign Out</button>
			</div>
		</div>

<!-- CHANGE PASSWORD FORM -->
		<div class="change-pass" id="c-pass">
			<h2>Change password</h2>
			<button class="pred"></button>
			<p>Old password</p>
			<input name="oldPass" type="password" class="old-pass text" placeholder="Your old password"><br>
			<p>New password</p>
			<input name="newPass" type="password" class="new-pass text" placeholder="Your new password"><br>
			<p>Confirm new password</p>
			<input name="cNewPass" type="password" class="c-new-pass text" placeholder="Confirm your new password"><br>
			<button class="c-cancel btn cancel">Cancel</button>
			<button value="submit" class="submit btn" id="c-submit">Submit</button>
		</div>
<!-- END OF CHANGE PASSWORD FORM -->

<!-- FRIENDS LIST -->
		<section id="friends">
			<nav id="f-list">
				<h2 class="fhead">Firends List</h2>
				<ul>
					<li class="f chatF">
						<span class="fname friendNick">Donal</span>
						<button class="fimg"></button>
						<div class="f-i">
							<button class="l-b"></button>
							<img src="images/avatar.jpg" alt="Someone" title="Click to show action"><br>
							<button class="sms"></button>
							<button class="vc"></button>
						</div>
					</li>
					<li class="f current">
						<span class="fname">Jacken</span>
						<button class="fimg"></button>
						<div class="f-i">
							<button class="l-b"></button>
							<img src="images/avatar.jpg" alt="Someone" title="Click to show action"><br>
							<button class="sms"></button>
							<button class="vc"></button>
						</div>
					</li>
				</ul>
			</nav>
			<span class="list-btn"><button class="btn"></button></span>
		</section>
<!-- END FRIENDS LIST -->

<!-- Search box -->
		<article class="searchbox">
			<input type="text" name="search" class="searchf" placeholder="Search" title="What are you looking for?">
			<button class="searchb"></button>
		</article>

		<span class="fa1"><button class="aboutme"></button><br>About me</span>
		<span class="fa2"><button class="chatapp"></button><br>Chat app</span>

		<div class="banner">
			<span class="cleft"><button class="left-control"></button></span>
			<ul class="imgs">
				<li><img src="images/banner.png" alt="banner" title="Banner" class="a-img"></li>
				
			</ul>
			<span class="cright"><button class="right-control"></button></span>
		</div>
		<p class="design">Design by Jacken (ThangKQ)</p>
<!-- END search box -->

<!-- My Infomation -->
		<div class="personal">
			<h2>Personal Infomation</h2>
			<button class="pred"></button>
			<button class="edit-info">Edit</button>
			<fieldset>
				<legend>Something about me</legend>
					<p class="me">Trầm tính</p>
			</fieldset>

			<fieldset>
				<legend>Personal information</legend>
				<table>
					<tr>
						<td>Full-name</td>
						<td>: Kiều Quốc Thắng</td>
					</tr>

					<tr>
						<td>Birthday</td>
						<td>: 1991 May 15</td>
					</tr>

					<tr>
						<td>You are</td>
						<td>: Nam</td>
					</tr>

					<tr>
						<td>Nick-name</td>
						<td>Jacken</td>
					</tr>
				</table>
			</fieldset>

			<fieldset>
				<legend>Address</legend>
				<table>
					<tr>
						<td>Address</td>
						<td>: Hoài Nhơn, Bình Định</td>
					</tr>

					<tr>
						<td>Shelter address</td>
						<td>: Thủ Đức Distric, Hồ Chí Minh City</td>
					</tr>
				</table>
						
			</fieldset>

			<fieldset>
				<legend>Education</legend>
				<table>
					<tr>
						<td>High School</td>
						<td>: Nguyễn Trân High School</td>
					</tr>

					<tr>
						<td>University / College</td>
						<td>: University of Iinformation Technology</td>
					</tr>
				</table>
							
			</fieldset>

			<fieldset>
				<legend>Contact:</legend>
				<table>
					<tr>
						<td>Cell phone</td>
						<td>: +84962054200</td>
					</tr>

					<tr>
						<td>Email</td>
						<td>: kqthang1505@gmail.com</td>
					</tr>

					<tr>
						<td>Address</td>
						<td>: 33 Đặng Văn Bi Street, Trường Thọ Ward, Thủ Đức Distric, Hồ Chí Minh City</td>
					</tr>
				</table>					
			</fieldset>	
		</div>
				<!-- End of Personal Information -->
		<!-- END OF Infomation -->
<!-- END my infomation -->


<!-- Edit My Infomation -->
		<div class="personal edit-person-form">
				
			<button class="c-personal"></button>
			<h2>Change Personal Infomation</h2>
			<div id="edit-info">

				<button class="edit-finish">Finish</button>
				<button class="bcancel">Cancel</button>

				<fieldset>
					<legend>Something about me</legend>
						<textarea class="ta text" readonly="readonly" placeholder="Tell me about yourself"></textarea>
				</fieldset>

				<fieldset>
					<legend>Personal information</legend>
					<table>
						<tr>
							<td>First-name</td>
							<td>: <input type="text" name="firstname" readonly="readonly" value="Jacken" class=" firstname text" title="Click to change your infomation." placeholder="First-name"></td>
						</tr>

						<tr>
							<td>Last-name</td>
							<td>: <input type="text" name="lastname" class="lastname text" title="Click to change your infomation." readonly="readonly" placeholder="Last-name"></td>
						</tr>

						<tr>
							<td>Birthday</td>
							<td>: <input type="date" name="birthday" class="birthday text" title="Click to change your infomation." readonly="readonly" ></td>
						</tr>

						<tr>
							<td>You are</td>
							<td>: <select name="gender" class="gender text" title="Click to change your infomation." readonly="readonly">
									<option value="">You are</option>
									<option value="1">Male</option>
									<option value="0">Female</option>
								</select>
							</td>
						</tr>

						<tr>
							<td>Nick-name</td>
							<td>: <input type="text" name="nickname" class="nickname text" title="Click to change your infomation." readonly="readonly" placeholder="Nick-name"></td>
						</tr>
					</table>
				</fieldset>

				<fieldset>
					<legend>Address</legend>
					<table>
						<tr>
							<td>Address</td>
							<td>: <input type="text" name="address" class="address text" title="Click to change your infomation." readonly="readonly" placeholder="Address"></td>
						</tr>

						<tr>
							<td>Shelter address</td>
							<td>: <input type="text" name="shelteraddress" class="shelteradd text" title="Click to change your infomation." readonly="readonly" placeholder="Shelter Address"></td>
						</tr>
					</table>
							
				</fieldset>

				<fieldset>
					<legend>Education</legend>
					<table>
						<tr>
							<td>High School</td>
							<td>: <input type="text" name="highschool" class="highschool text" title="Click to change your infomation." readonly="readonly" placeholder="Your high school"></td>
						</tr>

						<tr>
							<td>University / College</td>
							<td>: <input type="text" name="uni" class="university text" title="Click to change your infomation." readonly="readonly" placeholder="Your University of College"></td>
						</tr>
					</table>
								
				</fieldset>

				<fieldset>
					<legend>Contact:</legend>
					<table>
						<tr>
							<td>Cell phone</td>
							<td>: <input type="tel" name="cellphone" class="cellphone text" title="Click to change your infomation." readonly="readonly" placeholder="Your cell phone"></td>
						</tr>

						<tr>
							<td>Email</td>
							<td>: kqthang1505@gmail.com</td>
						</tr>

						<tr>
							<td>Address</td>
							<td>: 33 Đặng Văn Bi Street, Trường Thọ Ward, Thủ Đức Distric, Hồ Chí Minh City</td>
						</tr>
					</table>					
				</fieldset>	
			</div>
		</div>
<!-- END OF Edit Infomation -->

<!-- Chang password, information detail -->
	<script src="js/ajax_change_pass.js"></script>
<!-- END change pass -->

<!-- Main Video chat -->
<section id="w-vc">
	<button class="close-app"></button>
	<!-- Chat frame. -->
	<article>
		<ul id="FrameChatList">
			<!-- Khi tao ra mot khung chat moi t
							Thiet lap cac id nhu sau:
								- Fame chat co id="CF"+ten nguoi chat (lay tren class to)
								- Input Text cos id la ten cua nguoi chat cung voi  minh
			-->
			<li class="template chatFrame">
				<div class="headCF">
					<h3 class="to">Jacken</h3>
					<button class="CloseCF"></button>
				</div>
				<div class="mainCF"></div>
				<div class="emo-box">
					<ul class="all-emotioncs">
						<li><img src="images/smiles/smile.png" id=":)" class="img-emotions" title=":)"></li>
						<li><img src="images/smiles/haha.png" id=":D" class="img-emotions" title=":D"></li>
						<li><img src="images/smiles/adore.png" id="o.o" class="img-emotions" title="o.o"></li>
						<li><img src="images/smiles/grimace.png" id=":p" class="img-emotions" title=":p"></li>
						<li><img src="images/smiles/misdoubt.png" id=":o" class="img-emotions" title=":o"></li>
						<li><img src="images/smiles/what.png" id=":?" class="img-emotions" title=":?"></li>
						<li><img src="images/smiles/cool.png" id="8-)" class="img-emotions" title="8-)"></li>
						<li><img src="images/smiles/sleep.png" id="zzz" class="img-emotions" title="zzz"></li>
						<li><img src="images/smiles/angry.png" id="><" class="img-emotions" title="><"></li>
						<li><img src="images/smiles/cry.png" id=":((" class="img-emotions" title=":(("></li>
						<li><img src="images/smiles/nothing_to_say.png" id=":|" class="img-emotions" title=":|"></li>
						<li><img src="images/smiles/sad.png" id=":(" class="img-emotions" title=":("></li>
						<li><img src="images/smiles/stop.png" id=":x" class="img-emotions" title=":x"></li>
					</ul>
					<button class="down"></button>
				</div>
				<div class="messageCF">
					<input type="text" name = "inputText" class="inputField" placeholder = "Viết tin nhắn ..." >
					<button class="show-emo"></button>
				</div>
			</li>
			
			<li class="template chatFrame">
				<div class="headCF">
					<h3 class="to">Jacken</h3>
					<button class="CloseCF"></button>
				</div>
				<div class="mainCF"></div>
				<div class="emo-box">
					<ul class="all-emotioncs">
						<li><img src="images/smiles/smile.png" id=":)" class="img-emotions" title=":)"></li>
						<li><img src="images/smiles/haha.png" id=":D" class="img-emotions" title=":D"></li>
						<li><img src="images/smiles/adore.png" id="o.o" class="img-emotions" title="o.o"></li>
						<li><img src="images/smiles/grimace.png" id=":p" class="img-emotions" title=":p"></li>
						<li><img src="images/smiles/misdoubt.png" id=":o" class="img-emotions" title=":o"></li>
						<li><img src="images/smiles/what.png" id=":?" class="img-emotions" title=":?"></li>
						<li><img src="images/smiles/cool.png" id="8-)" class="img-emotions" title="8-)"></li>
						<li><img src="images/smiles/sleep.png" id="zzz" class="img-emotions" title="zzz"></li>
						<li><img src="images/smiles/angry.png" id="><" class="img-emotions" title="><"></li>
						<li><img src="images/smiles/cry.png" id=":((" class="img-emotions" title=":(("></li>
						<li><img src="images/smiles/nothing_to_say.png" id=":|" class="img-emotions" title=":|"></li>
						<li><img src="images/smiles/sad.png" id=":(" class="img-emotions" title=":("></li>
						<li><img src="images/smiles/stop.png" id=":x" class="img-emotions" title=":x"></li>
					</ul>
					<button class="down"></button>
				</div>
				<div class="messageCF">
					<input type="text" name = "inputText" class="inputField" placeholder = "Viết tin nhắn ..." >
					<button class="show-emo"></button>
				</div>
			</li>

			<li class="template chatFrame">
				<div class="headCF">
					<h3 class="to">Donal</h3>
					<button class="CloseCF"></button>
				</div>
				<div class="mainCF"></div>
				<div class="emo-box">
					<ul class="all-emotioncs">
						<li><img src="images/smiles/smile.png" id=":)" class="img-emotions" title=":)"></li>
						<li><img src="images/smiles/haha.png" id=":D" class="img-emotions" title=":D"></li>
						<li><img src="images/smiles/adore.png" id="o.o" class="img-emotions" title="o.o"></li>
						<li><img src="images/smiles/grimace.png" id=":p" class="img-emotions" title=":p"></li>
						<li><img src="images/smiles/misdoubt.png" id=":o" class="img-emotions" title=":o"></li>
						<li><img src="images/smiles/what.png" id=":?" class="img-emotions" title=":?"></li>
						<li><img src="images/smiles/cool.png" id="8-)" class="img-emotions" title="8-)"></li>
						<li><img src="images/smiles/sleep.png" id="zzz" class="img-emotions" title="zzz"></li>
						<li><img src="images/smiles/angry.png" id="><" class="img-emotions" title="><"></li>
						<li><img src="images/smiles/cry.png" id=":((" class="img-emotions" title=":(("></li>
						<li><img src="images/smiles/nothing_to_say.png" id=":|" class="img-emotions" title=":|"></li>
						<li><img src="images/smiles/sad.png" id=":(" class="img-emotions" title=":("></li>
						<li><img src="images/smiles/stop.png" id=":x" class="img-emotions" title=":x"></li>
					</ul>
					<button class="down"></button>
				</div>
				<div class="messageCF">
					<input type="text" name = "inputText" class="inputField" placeholder = "Viết tin nhắn ..." >
					<button class="show-emo"></button>
				</div>
			</li>
		</ul>
	</article>

	<script type="text/javascript">
		$(document).ready(function() {

			// Enable drag element
			$('.template').draggable({snap: true});
			
			// Close a chat frame
			$('.CloseCF').click(function() {
				$(this).parent().parent().addClass('template');
				$(this).parent().parent().find('.mainCF').html("");
				$(this).parent().parent().find('.mainCF').removeAttr('id');
				$(this).parent().parent().find('.inputField').removeAttr('id');
				$(this).parent().parent().hide();
			});

			// Show hide emotion
			$('.show-emo'). click(function() {
				$(this).parent().parent().find('.emo-box').toggle();
			});

			// Get content of emotion
			$('.img-emotions').click(function() {
				
				var emo = $(this).attr('id');
				$(this).parent().parent().parent().next().find('.inputField').val(emo);
			});
		});
	</script>

	<!-- Video frame. -->
	<article id="videoFrame">
		
		<canvas id="canvas"></canvas>
		<canvas id="source"></canvas>
		
		<p id="sourceStatus" class="sttV">Status</p>
		<video id="sourcevid" autoplay></video>
		<video id="remotevid" autoplay></video>	
		<p id="remoteStatus" class="sttV">Jacken - Life is beautiful</p>

		<button class="btn" id="start" type="button" onclick="startVideo();"></button>
		<button class="btn" id="stop" type="button" onclick="stopVideo();"></button>
		<button class="btn" id="connect" type="button" onclick="connect();" ></button>
		<button class="btn" id="hangup" type="button" onclick="onHangUp();"></button>
	</article>
	<script>
		$(document).ready(function() {
			
			// Remote
			var canvas = document.getElementById("canvas");
			var source = document.getElementById("source");

			var video = document.getElementById("remotevid");
			var source = document.getElementById("sourcevid");

			var context = canvas.getContext("2d");

			// Draw video onto canvas
			//video.addEventListener('onplay', function () {
			//	context.drawImage(video,0,0,canvas.width,canvas.height);
			//});
			
		});
	</script>

	<script src="js/client.js"></script>			
</section>

<!-- End of main Video chat -->

	</body>
</html>

<!-- Javascript -->
<script type="text/javascript">
	$(document).ready(function() {
		
		// Mouse enter friends list
		$('#friends').mouseenter(function() {

			$('nav#f-list').animate({
				marginLeft: '200px'
			}, 1000);
			
		});
		$('#friends').mouseleave(function() {
			$('nav#f-list').animate({
				marginLeft: '0px'
			}, 1000);
		});

		//
		$('.n-hide').click(function() {

			$('.u-act').animate({
				marginTop: '0px',
				opacity: '0'
			}, 1000);

			// Remove class
			$(this).removeClass('n-hide');
			// Add class hide
			$(this).addClass('name');
		});

		//
		$('[readonly]').click(function() {			
			$(this).removeAttr("readonly");
			$('.edit-finish').show();
			$('.bcancel').show();
		});

		$('input[readonly]').focusout(function() {		
			$('.edit-finish').hide();
			$('.bcancel').hide();
		});

		// Close form information
		$('button.c-personal').click(function() { $(this).parent().hide(); });

		// Open form information
		$('button.aboutme').click(function() { $('.edit-person-form').show(); });

		// Open user action form
		$('.name').click(function() {

			$('.u-act').show();
			$('.u-act').animate({
				marginTop: '-20px',
				opacity: '1'
			}, 1000);
		});

		// Close user action form
		$('button.c-change').click(function() { 
			$('.u-act').animate({
				marginTop: '0px',
				opacity: '0'
			});
			$('.u-act').hide();
		});

		// Show change password form
		$('button.btn-c-pass').click(function() {

			// Hide user action form
			$('.u-act').animate({
				marginTop: '0px',
				opacity: '0'
			}, 1000);
			$('.u-act').hide();

			// Show change password form
			$('.change-pass').show();
			$('.change-pass').animate({
				marginTop: '-20px',
				opacity: '1'
			}, 1000);
		});

		// Close change password form
		$('button.c-cancel').click(function() {
			
			// Hide change password form
			$('.change-pass').animate({
				marginTop: '0px',
				opacity: '0'
			}, 1000);
			$('.change-pass').hide();
			
			// Show user action form
			$('.u-act').show();
			$('.u-act').animate({
				marginTop: '-20px',
				opacity: '1'
			}, 1000);
		});

		// Action in friends list
		$('li.f').click(function() {

			// Hide all act
			$('.f-i').hide();
			// Show action each friend
			$(this).find('.f-i').show();
			$(this).find('.f-i').animate({
				marginLeft: '0px',
				opacity: '1'
			}, 1000);
		});

		// Open video chat application
		$('.chatapp').click(function() { $('#w-vc').show(100); });

		// Close video chat application
		$('.close-app').click(function() { $('#w-vc').hide(100); });
	});
</script>